<template>
	<view class="content">
		<!-- 小区搜索 -->
		<view class="search-cont">
			<HMfilterDropdown
				:menuTop="0"
				:filterData="filterData"
				:defaultSelected="defaultSelected"
				:updateMenuName="true"
				@confirm="confirm"
				dataFormat="Object"
			></HMfilterDropdown>

			<view class="publish-frame">
				<block v-for="(item, index) in houseArr" :key="index">
					<view class="publish-cata" @click="showDetail(item)">
						<view class="publish-img"><image :src="item.imageInfoList[0].imagePath" mode="" class="img"></image></view>
						<view class="publish-title">
							<view class="title-primary">
								<text>{{ item.residentialName }}</text>
							</view>

							<view class="title-detail">
								<text>{{ item.city }}</text>
								<text>{{ item.region }}</text>
							</view>

							<view class="title-tag">
								<text class="title-t">
									在租
									<text>{{ item.rentIng }}</text>
									套
								</text>
								<text class="title-t tag-show">
									在售
									<text>{{ item.sellIng }}</text>
									套
								</text>
							</view>

							<view class="title-pri">
								<text>{{ item.priceAvg }}元/㎡</text>
							</view>
						</view>
					</view>
				</block>
			</view>

			<!-- 反馈组件 -->
			<tips ref="tips"></tips>
		</view>
	</view>
</template>

<script>
// 引入接口
import { listing } from '../../../api/api.js';
import { publicing } from '../../../api/api.js';
// 引入请求地址
import { getHouseUrl } from '../../../api/request.js';
// 引入筛选组件
import HMfilterDropdown from '../../../components/HM-filterDropdown/HM-filterDropdownForHouse.vue';
//筛选菜单数据
import data from '../../../common/data2.js';
// 引入vuex的mapstate
import { mapState } from 'vuex';
// 解构console
var { log } = console;
// 引入反馈组件
import tips from '../../../element/tips.vue';

export default {
	// 注册组件
	components: {
		HMfilterDropdown: HMfilterDropdown,
		tips
	},

	data() {
		return {
			type: '',
			houseArr: [], // 小区信息列表
			filterData: [],
			defaultSelected: [],
			residentialName: '', // 搜索关键词 小区名
			residential: '',
			city: '', // 区域（城市、地区）
			region: '',
			price: '', // 价格
			roomNum: '', // 户型
			measure: '', // 面积
			renovation: '', // 装修
			userId:'',	// 用户标识
		};
	},

	methods: {
		// 初始化: 获取小区列表
		selectHouseList() {
			let data = {
				userId:this.userId
			}
			publicing(getHouseUrl,data)
				.then(res => {
					if (res.data.message == '获取数据为空') {
						this.houseArr = [];
						let bull = true;
						this.setTips(bull);
					} else {
						let bull = false;
						this.setTips(bull);
						this.houseArr = res.data.data;
						log("小区页面初始化获取的信息:"+JSON.stringify(this.houseArr))
					}
				})
				.catch(err => {
					log(err);
				});
		},

		// 反馈提示
		setTips(bull) {
			this.$nextTick(function() {
				this.$refs.tips.init(bull);
			});
		},

		// 筛选框完成:接收菜单结果
		confirm(e) {
			this.indexArr = e.index;
			this.valueArr = e.value;
			console.log('筛选框传入的值' + this.valueArr);

			let strReg = new RegExp('"', 'g'); // 去除""符号的正则
			let reRion = JSON.stringify(this.valueArr[0][1]); // 区域
			/*
			 *	##区域
			 *	默认无值 -> ""
			 *   不限		-> ""
			 *   有值 	-> 去除""字符串
			 */
			if (this.valueArr[0][1] == null) {
				this.region = '';
			} else if (reRion == '"不限"') {
				this.region = '';
			} else {
				this.region = reRion.replace(strReg, '');
			}
			log('区域的值:' + this.region);

			let data = {
				region: this.region
			};
			publicing(getHouseUrl, data)
				.then(res => {
					if (res.data.message == '获取数据为空') {
						this.houseArr = [];
						let bull = true;
						this.setTips(bull);
					} else {
						let bull = false;
						this.setTips(bull);
						this.houseArr = res.data.data;
					}
					// this.houseArr = res.data.data;
				})
				.catch(err => {
					log(err);
				});
		},

		// 点击小区: 获取小区详情信息
		showDetail(item) {
			log('点击小区可传入的信息:'+JSON.stringify(item))
			let obj = {
				residentialName: item.residentialName,
				region: item.region,
				priceAvg: item.priceAvg,
				sellIng: item.sellIng,
				rentIng: item.rentIng,
				years: item.years,
				architectureType: item.architectureType,
				greeningRate: item.greeningRate,
				residentialMeasure: item.residentialMeasure,
				propertyName: item.propertyName,
				plotRatio: item.plotRatio,
				address: item.address,
				longitude:item.longitude,
				latitude:item.latitude,
				address:item.address,
				residentialId:item.residentialId,
				type: this.type,
				imageInfoList:item.imageInfoList,
			};
			// 路径带数据不能带对象,数组只能是字符串
			let objStr = JSON.stringify(obj);
			log('跳转详情页面的值:' + objStr);
			wx.navigateTo({
				url: 'detail?obj=' + objStr
			});
		}
	},

	// 接收首页面的路径数据
	onLoad(e) {
		let objdata = JSON.parse(e.obj);
		this.type = objdata.type;
		this.userId = objdata.openid;
		if(this.userId == undefined){
			this.userId = ''
		}
		console.log('父组件传入的type值:' + this.type);

		//定时器模拟ajax异步请求数据
		setTimeout(() => {
			this.filterData = data;
		}, 100);
	},

	// 初始化函数
	mounted() {
		this.selectHouseList();
	},

	// 属性改变是触发(需要注意的是:一开始触发了两次,之后再进行页面初始化)
	computed: {
		...mapState(['searchdata']),
		getStr() {
			this.residential = this.searchdata.searchstr;
		}
	},
	// 侦听器
	watch: {
		residential(newValue, oldValue) {
			this.residentialName = newValue;

			let data = {
				residentialName: this.residentialName,
				housingType: this.type,
				userId:this.userId
			};

			publicing(getHouseUrl, data)
				.then(res => {
					if (res.data.message == '获取数据为空') {
						this.houseArr = [];
						let bull = true;
						this.setTips(bull);
					} else {
						let bull = false;
						this.setTips(bull);
						this.houseArr = res.data.data;
					}
				})
				.catch(err => {
					log(err);
				});
		}
	}
};
</script>

<style>
.content {
	margin: 0 30upx;
	background-color: #ffffff;
}

/* 二手房列表展示 */
.publish-frame {
	width: 100%;
	display: flex;
	flex-direction: column;
	padding-top: 125upx;
}
.publish-cata {
	width: 100%;
	display: flex;
	margin-bottom: 20upx;
}
.publish-img {
	width: 200upx !important;
	height: 200upx;
}
.img {
	width: 200upx !important;
	height: 100%;
	border-radius: 20upx;
}
.publish-title {
	margin-left: 20upx;
	display: flex;
	flex-direction: column;
}
.title-primary {
	font-size: 30upx;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.title-detail {
	margin: 10upx 0 10upx -10upx;
	font-size: 25upx;
	color: #666666;
	display: flex;
	flex-direction: row !important;
}
.title-detail text {
	padding: 0 10upx;
}
.title-tag {
	padding: 10upx 0;
	height: 50upx;
	display: flex;
	align-items: center;
}
.title-tag text {
	font-size: 25upx;
	/* 	padding: 0 10upx;
	margin: 5upx 15upx 35upx 0;
	border-radius: 5upx; */
}

.title-t text {
	color: #ff0000;
}
.tag-show {
	margin-left: 20upx;
}
.title-pri {
	display: flex;
	align-items: flex-end;
}
.title-pri text:nth-child(1) {
	font-size: 30upx;
	color: #6f8ac3;
	font-weight: bold;
	margin-right: 5upx;
}
.title-pri text:nth-child(2) {
	font-size: 20upx;
	color: #666666;
}
</style>
